<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>CRM客户管理系统</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
        }

        .sidebar {
            width: 200px;
            background-color: #2c3e50;
            position: fixed;
            height: 100%;
            padding-top: 20px;
        }
        .logo {
            width: 100%;
            padding: 20px 0;
            text-align: center;
            background-color: #2c3e50;
            color: white;
            font-size: 20px;
        }
        .menu-item {
            margin: 10px 0;
            position: relative;
            a {
                padding: 10px 15px;
                text-decoration: none;
                font-size: 18px;
                color: #ecf0f1;
                display: block;
                &:hover {
                    background-color: #34495e;
                }
            }
            .submenu {
                display: none;
                background-color: #34495e;
                a {
                    padding-left: 30px;
                }
            }
            &:hover .submenu {
                display: block;
            }
        }

        .main-content {
            margin-left: 200px;
            padding: 20px;
        }
        .navbar {
            background-color: #2c3e50;
            top: 0;
            right: 0;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            box-sizing: border-box;
            position: fixed;
            .hamburger {
                font-size: 2em;
                cursor: pointer;
                color: white;
            }
            .username {
                width: 150px;
                font-size: 1em;
                color: white;
                position: relative;
                cursor: pointer;
                .user-name {
                    display: inline-block;
                    padding-right: 10px;
                }
                &:hover .user-options {
                    display: block;
                    background-color: #2c3e50;
                }
            }
        }
        .user-options {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            background-color: #2c3e50;
            list-style: none;
            width: 150px;
            li {
                a {
                    color: #ecf0f1;
                    text-decoration: none;
                    display: block;
                }
                &:hover {
                    background-color: red;
                }
            }
        }
        .sp1{
            padding-left: 40px;
        }
        /* 添加张芳超旁边的角标样式 */
        .menu-item.sp1::after {
            content: '▾'; /* 添加角标 */
            position: absolute;
            right: 0;
            top: 50%;
            color: white;
            transform: translateY(-50%);
        }
        h1{
            text-align: center;
            padding-top: 30px;
        }
    </style>
</head>
<body>
<div class="navbar">
    <div class="hamburger">&#9776;</div>
    <div class="username">
        <span class="user-name">${nickname}<span class="menu-item sp1"></span></span>
        <div class="user-options">
            <li><a href="${pageContext.request.getContextPath()}/preUpdateLogin?nickname=${nickname}">修改密码</a></li>
            <li><a href="${pageContext.request.getContextPath()}/login.jsp">退到登录</a></li>
        </div>
    </div>
</div>
<div class="sidebar">
    <div class="logo">CRM客户管理系统</div>
    <div class="menu-item">
        <a href="${pageContext.request.getContextPath()}/ListEmployee">员工管理</a>
    </div>
    <div class="menu-item">
        <a href="${pageContext.request.getContextPath()}/ListCustomerCompany">客户公司管理</a>
    </div>
    <div class="menu-item">
        <a href="${pageContext.request.getContextPath()}/ListCustomer?nickname=${nickname}">客户管理</a>
    </div>
    <div class="menu-item">
        <a href="${pageContext.request.getContextPath()}/ListGoodsCategory">商品类别管理</a>
    </div>
    <div class="menu-item">
        <a href="${pageContext.request.getContextPath()}/ListGoods">商品管理</a>
    </div>
</div>
<div class="main-content">
    <h1>欢迎进入CRM客户管理系统</h1>
</div>
</body>
</html>